<template>
  <nav>
<<<<<<< HEAD
    app
  </nav>
  <router-view/>
</template>

<style lang="less">

=======
    <top-header>{{ headerTitle }}</top-header>
    <search-input :placeholder="placeholder" :maxlength="maxlength"></search-input>
  </nav>
  
  <router-view/>
  <tab-bar></tab-bar>
</template>
<script>
import TopHeader from './components/TopHander/'
import TabBar from './components/TabBar/'
import SearchInput from './components/SearchInput/'

import { useStore } from 'vuex'
import { isReactive } from '@vue/reactivity'
import {useRouter} from 'vue-router'
import { watch } from '@vue/runtime-core'
                                   
export default ({
  setup() {
    const store = useStore()
    // console.log(store.state)  //代理对象
    // console.log(isReactive(store.state))
    const router = useRouter()

    // console.log(router.currentRoute.value)
    watch(
      //第一个参数 监视对象
      ()=> {
        return router.currentRoute.value.name
      },
      //第二个参数 新值 监视后的执行函数
      (value)=>{
        // console.log(value)
        store.commit("setHeaderTitle",value)
        store.commit("setPlaceholder",value)
      }
    );


    return store.state
  },
  components:{
    TopHeader,
    TabBar,
    SearchInput
  }
})
</script>


<style lang="less">
.container{
    padding: .82rem .44rem;
    box-sizing: border-box;
}
h1{
  height: 340px;
  width: 440px;
}
>>>>>>> common
</style>
